<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for循环遍历</v-for></title>
</head>
<body>
 <script src="/js/vue.js"></script>
    <div id="app">
        <!-- v-for实现了页面列表的渲染 语法是 item in items.  item是原数组，item是数组中的成员或者元素-->
        <!-- v-for 数组-->


        <ul>
            <li>{{books[0]}}</li>
            <li>{{books[1]}}</li>
            <li>{{books[2]}}</li>
            <li>{{books[3]}}</li>
        </ul>
    
        <!-- 1.无下标循环-->
        <ul>
            <li v-for="item in books">{{item}}</li>
        </ul>
        <!-- 2.有下标循环-->
        <ul>
            <li v-for="(item,index) in books">{{index+1}}.{{item}}</li>
        </ul>
    
        <!-- v-for 对象-->
        <ul>
            <li v-for="item in persion">{{item}}</li>
        </ul>
    
        <ul>
            <li v-for="(value,key) in persion">{{key}}:{{value}}</li>
        </ul>
    
        <ul>
            <li v-for="(value,key,index) in persion">{{index+1}}--{{key}}:{{value}}</li>
        </ul>
    
        <!-- 循环的嵌套 多维解构-->
        <ul v-for="items in persions">
            <li v-for="item in items"></li>
        </ul>


    </div>
    
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                msg:"hello world",
                books:['三国演义','西游记','红楼梦','水浒传'],
                persion:{
                    name:'shane',
                    age:12,
                    gender:"男"
                },
                persions:{
                    1:{
                    name:'shane',
                    age:12,
                    gender:"男"
                    },
                    2:{
                    name:'kitty',
                    age:14,
                    gender:"女"
                    },
                    3:{
                    name:'tom',
                    age:18,
                    gender:"男"
                    },
                }
            }
        })
    </script>

</body>
</html>